import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    app.directive('img-lazy', {
      inserted(el, binding) {
        console.log(binding.value)
        useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            el.removeAttribute('v-img-lazy')
          }
        })
      },
    })
  },
}
